<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户主页</title>
<%
	String path = request.getContextPath();				//获取请求项目的根路径
	String basePath=request.getScheme()+"://"		//获取请求使用的协议名（http或https）
				+request.getServerName()+":"				//获取请求url上的主机名
				+request.getServerPort()+path+"/";			//获取请求url上的端口号
%>
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/css/reset.css?v=<%= System.currentTimeMillis()%>"/>
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/css/user.css?v=<%= System.currentTimeMillis()%>"/>
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/css/md-input.css?v=<%= System.currentTimeMillis()%>"/>
<script type="text/javascript" src="<%=basePath%>static/js/echarts.js?v=<%= System.currentTimeMillis()%>"></script>
<script src="<%=basePath%>static/js/jquery.js"></script>
</head>
<style>
.new-paper-box{
	margin-top: 37px; 
	transition: .2s;
}

.new-paper-box a,.new-paper-box button{
	padding: 7px 27px;
	/* border: 1px solid sienna; */
	display: inline-block;
	color: #181818;
	border-radius: 10px;
}

.new-paper-box .have-not-paper a{
	margin: 0 30px;
	border: 1px solid sienna;
	display: none;
}

.new-paper-box .have-new-paper{
	text-align: center;
}

.new-paper-box .have-new-paper button{
	background-color: #ff8eb2;
	color: white;
	outline: none;
	border: none;
	cursor: pointer;
	
	/* display: none; */
}
</style>
<style>
.btn-delete{
	border: none;
	cursor: pointer;
	background: none;
	color: #eb1f67;
	margin-right: 7px;
}
</style>
<style>
.read-paper-box{
	z-index: 2;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	background-color: rgba(18, 18, 18, .3);	
	
	justify-content: center;
	align-items: center;
}

.read-paper-box .new-paper-card{
	position: relative;
	width: 300px;
	height: fit-content;
	background-color: white;
	
	padding: 17px 0;
	
	box-shadow: 0 4px 3px rgba(80, 80, 80, .3);
	border-radius: 10px;
}

.read-paper-box .close-read-box{
	position: absolute;
	right: 7px;
	top: 7px;
	float: right;
	
	cursor: pointer;
	padding: 4px 10px 5px 10px;
	border: none;
	outline: none;
	border-radius: 44px;
	background-color: #26C6DA;
}

.read-paper-box .comment-input-box{
	text-align: center;
	padding: 0 30px;
	font-size: 14px;
}

.read-paper-box input{
	width: 100%;
	height: 27px;
	outline: none;
	border: 1px solid #ebebeb;
	color: #5e5e5e;
	padding-left: 2px;
	padding-right: 2px;
}

.read-paper-box .inline-input{
	margin-top: 17px;
	height: 37px;
	text-align: center;
}

.read-paper-box .inline-input button{
	outline: none;
	border: none;
	padding: 7px 12px;
	border-radius: 7px;
	background-color: #26C6DA;
	
	cursor: pointer;
}

.read-paper-box #btn-display-input{
	float: left;
	margin-left: 30px;
	width: 37%;
}

.read-paper-box #more-paper{
	float: right;
	margin-right: 30px;
	width: 30%;
	color: whitesmoke;
	background-color: #ff8eb2;
}
</style>
<body>
<div class="nav-aside">
			<div class="nav-logo">
				<p style="text-align: center; color: #e6e6e6; margin: 7px auto;"><span class="icon icon-peach">用户客户端</span></p>
			</div>
			<div class="top-img"></div>
			<!-- <div class="input-box">
				<form onsubmit="return false" action="">
					<span class="icon icon-search"></span>
					<input type="search" name="text" id="input-search" value="" placeholder="search..."/>
				</form>
			</div> -->
			<div class="nav-main">
				<ul>
					<li class="li-active"><a href="#">
						<span class="icon icon-index">主页</span>
					</a></li>
					<li><a href="#">
						选项1
					</a></li>
					<li><a href="#">
						选项2
					</a></li>
				</ul>
			</div>
		</div>
		<div class="main-container">
			<div class="main-header">
				<h2>欢迎你，<span id="text_user_name"></span></h2>
				<div class="main-header-right-box">
					<a style="color: royalblue; cursor: pointer;" href="../user/login">退出登录</a>
				</div>
			</div>
			<div class="main-box clear-both">
				<div class="main-div-box">
					
					<div class="main-row1">
						<div class="letter-box card-box clear-both">
							<h3>送给你的信啊</h3>
							<div class="line-divider"></div>
							<p class="letter-text-p">
								<span class="letter-text">
									即使一味的回首过去，也没人会得到快乐，也许正是那些要守护和守护自己的同伴赐予了他重新前进的力量吧。守护而失去，被守护而失去，即使这样也仍然继续承担着。到头来还是重蹈覆辙。这就是所谓的生活吧。人生就是麻烦啊。
								</span>
							</p>
							<div class="line-divider"></div>
							<span class="letter-from">
								《银魂》
							</span>
						</div>
						
						<div class="card-box statis-yesterday">
							<div id="sta1-chart"></div>
						</div>
						
						<div class="send-paper-box card-box">
							<h3>发送纸条</h3>
							<div class="line-divider"></div>
							<form id="sendForm" onsubmit="return sendPaper()" method="post" action="#">
								<!-- <input name="who" id="paper-who" type="text" placeholder="匿名" />
								<div class="line-divider"></div> -->
								<input type="text" id="paper-title" name="title" placeholder="标题" />
								<!-- <input type="text" id="paper-content" name="title" placeholder="让我再看你一遍，从南到北..." /> -->
								<textarea name="content" id="paper-content" rows="4" cols="20"
									placeholder="让我再看你一遍，从南到北..."
								></textarea>
								<input id="btn-submit" type="submit" value="上传纸条"/>
							</form>
						</div>
						
						<div class="message-row1-box">
							<div class="card-box message-box">
								<h3>最新消息</h3>
								<div class="line-divider"></div>
								<div class="message-text-box">
									<span class="msg-from">路人甲</span>
									<span class="messgae-text">交作业了没有啊！</span>
								</div>
							</div>
							
							<div class="card-box receive-box">
								<h3>纸条板</h3>
								<div class="line-divider"></div>
								<div class="new-paper-box" style="display: none;">
									<div class="have-not-paper">
										<a href="#">没有取到纸条...</a>
									</div>
									<div class="have-new-paper">
										<button onclick="showPaper()">取出了一条新纸条</button>
									</div>
								</div>
								<div class="button-box">
									<button onclick="fetchPaper()">取出纸条</button>
								</div>
							</div>
						</div>
					</div>
						
					<div class="my-paper-box card-box">
						<table>
							<thead>
								<tr>
									<th width="11%">标题</th>
									<th width="11%">昵称</th>
									<th width="26%">内容</th>
									<th width="10%">取出数</th>
									<th width="10%">评论数</th>
									<th width="10%">点赞数</th>
									<th width="14%">发表日期</th>
									<th width="8%">操作2</th>
								</tr>
							</thead>
							<tbody>
								<c:forEach var="paper" items="${sessionScope.userPapers}">
									<tr>
										<td>${paper.title}</td>
										<td>匿名</td>
										<td>${paper.content }</td>
										<td>${paper.numReceiver }</td>
										<td>${paper.numComment }</td>
										<td>${paper.numCommend }</td>
										<td>${paper.createTime }</td>
										<td><button onclick="deletePaper(${paper.paperId})" class="btn-delete">删除</button></td>
									</tr>
								</c:forEach>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
		<div class="read-paper-box">
			<div class="new-paper-card">
				<button class="close-read-box" onclick="closeReadBox()">x</button>
				<h3 id="paper-title-text" style="margin-top: 17px; font-size: 20px;">纸条标题</h3>
				<div class="line-divider"></div>
				<div id="paper-content-text" class="new-paper-text-box;" style="padding: 7px 30px;font-size: 14px;color: #5e5e5e;">
					让我再看你一遍，从南到北...
				</div>
				<div class="line-divider"></div>
				<div class="comment-input-box" style="display: none;">
					<input placeholder="文明评论" maxlength="16" />
				</div>
				<div class="inline-input clear-both">
					<button id="btn-display-input" onclick="inputDispaly()">评论</button>
					<button id="more-paper">再取一条</button>
				</div>
			</div>
		</div>
</body>
<script type="text/javascript">
		// 第一个图表
		// 获取div
		var chart = echarts.init(document.getElementById('sta1-chart'));
		
		// 配置数据
		var option = {
			title: {
				text: '个人数据',
			},
			legend: {
				data: ['昨天', '今天'],
			},
			yAxis: {
				data: ['点赞数', '评论数', '发表量'],
			},
			xAxis: {},
			series: [
				{
					name: '昨天',
					type: 'bar',
					data: [5, 20, 36, 77, 89]
				},
				{
					name: '今天',
					type: 'bar',
					data: [5, 44, 56, 67, 89]
				},
			],
		};
		
		chart.setOption(option);
	</script>
	
	<script>
		var receive_box_open = false;
		function fetchPaper(){
			var box = $('.receive-box');
			var new_paper_box = $('.new-paper-box');
			console.log(box.css('height') + ' ' + receive_box_open)
			if(!receive_box_open){
				box.css('height', '67%');
				new_paper_box.css('display', 'block');
				dequeue();
				receive_box_open = true;
			}
			else{
				box.css('height', '30%');
				new_paper_box.css('display', 'none');
				receive_box_open = false;
			}
		}
		
		function showPaper(){
			$('.read-paper-box').css('display', 'flex');
		}
		
		function closeReadBox(){
			$('.read-paper-box').css('display', 'none');
		}
		
		function inputDispaly(){
			var box = $('.comment-input-box');
			var more_send = $('#more-paper');
			console.log(box.css('height'));
			if(box.css('display') == 'block'){
				box.css('display', 'none');
				more_send.html('再收一条');
				more_send.css('background-color', '#ff8eb2');
			}
			else {
				box.css('display', 'block');
				more_send.html('发送评论');
				more_send.css('color', '#232323');
				more_send.css('background-color', '#2aeaff');
			}
		}
		
		function sendPaper(){
			$.ajax({
                type: "POST",  
                url:"./send",  
                data:$('#sendForm').serialize(),// 你的formid  
                async: false,  
                error: function(request) {  
                    alert(request);  
                },  
                success: function(data) {  
                	$('#paper-title').val('')
                    $('#paper-content').val('')
                    alert(data)
                    location.reload();
                }  
            })
			return false;
		}
		
		function dequeue(){
			$.ajax({
				url: './dequeue', // 2 是 comment
				success: function(res){
					if(res['msg'] == 'ok'){
						var title = res['title'];
						var content = res['content'];
						
						$('.have-new-paper button').css('display', 'inline-block');
						$('.have-not-paper a').css('display', 'none');
						
						$('#paper-title-text').html(title);
						$('#paper-content-text').html(content);
					} else {
						console.log('err');
						$('.have-new-paper button').css('display', 'none');
						$('.have-not-paper a').css('display', 'inline-block');
					}
				}
			});
		}
		
		function deletePaper(paperId){
			$.ajax({
				url: './delete?pid=' + paperId, // 2 是 comment
				success: function(res){
					alert(res);
					location.reload();
				}
			});
		}
		
	</script>
</html>